<template>
  <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section id="c1">

      <Row type="flex">
        <Col flex="600px">
          <h2 class="title2">由建设单位发包工程 <i>{{ config.page.total }}</i></h2>
        </Col>
        <Col flex="550px">

        </Col>
      </Row>

      <Table
          :columns="config.columns"
          :row-key="(record,index) => index"
          :data-source="config.list"
          :pagination="config.page"
          :loading="config.loading"
          @change="(pagination)=> changeHandler(pagination, config)"
          bordered
      >
        <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
        <template #name="{ text, record }">
          <router-link target="_blank" :to="{ path: `/activity/${record.activityId}` }" class="blue" >
            {{ text }}
          </router-link>
        </template>

        <template #detail="{ text ,record}">
          <router-link target="_blank" :to="{ path: `/company/${record.projUtakeUnitId}` }" class="blue" >
            {{ text }}
          </router-link>
        </template>

        <template #yellow="{ text }">
          <span class="yellow">{{text}}</span>
        </template>
      </Table>

    </section>
    <section id="c2">
      <Row type="flex">
        <Col flex="600px">
          <h2 class="title2">项目分包或专项委托工程 <i> 0</i></h2>
        </Col>
        <Col flex="550px">

        </Col>
      </Row>

      <Table
          :columns="config.columns"
          :row-key="(record,index) => index"
          :data-source="em"
          :pagination="config.page"
          :loading="config.loading"
          @change="(pagination)=> changeHandler(pagination, config)"
          bordered
      >
        <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
        <template #name="{ text, record }">
          <router-link target="_blank" :to="{ path: `/activity/${record.activityId}` }" class="blue" >
            {{ text }}
          </router-link>
        </template>


        <template #yellow="{ text }">
          <span class="yellow">{{text}}</span>
        </template>
      </Table>
    </section>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs,} from 'vue';
import { anchorLink } from "/@/components/linkComponent/index";
import {Row, Col, Table, } from 'ant-design-vue';
import { getProjectOutsourcingApi } from "/@/api/pro";
import {parseTime} from "/@/utils";
const Columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '工程类别', dataIndex: 'actiBusiName'  ,slots: ({customRender: "yellow"})},
  { title: '工程名称', dataIndex: 'actiName' ,width:300 , slots: ({ customRender: 'name' })},
  { title: '承包方', dataIndex: 'projUtakeUnitName', slots: ({ customRender: 'detail' }) },
  { title: '发包方式', dataIndex: 'projContName' },
  { title: '发包时间', dataIndex: 'contConfDate',customRender: ({ record })=> parseTime(record.contConfDate) },
  { title: '合同价（万元）', dataIndex: 'fixedAmount' }
]
export default defineComponent({
  components: {
    anchorLink , Row, Col, Table
  },
  setup() {
    const projectId = inject('projectId') as string;

    const em = ref([])
    const config = reactive({
      columns: Columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      },
      params:{
        contLevel:'',
      }
    })

    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      let { contLevel } = config.params;
      const params = { projectId, current , contLevel };
      getProjectOutsourcingApi(params).then(({data ,success}) => {
        if(success){
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }
    const init = () => {
      changeHandler({current: 1}, config);
    }
    onMounted(init)
    return {
      config, changeHandler,em,
      links: ref([{
        key: '#c1',
        title: '由建设单位发包工程'
      },{
        key: '#c2',
        title: '项目分包或专项委托工程'
      }])
    }
  }
})
</script>

<style lang="less" scoped>

.base-panels{
  padding-bottom: 50px;
}

.types {
  display: flex;

  li {
    padding: 5px 10px;
    margin-right: 20px;
    font-size: 14px;
    line-height: 22px;
    color: #333;
    cursor: pointer;
    background: #F6F6F6;

    &.active {
      color: @white;
      background: #216DE5;
    }
  }
}

.title2{
  padding: 20px 0 15px !important;
}

.yellow{
  color: #FF7319;
}
</style>
